<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '../stores/user'
import { useProgressStore } from '../stores/progress'

/**
 * 获取用户状态管理
 */
const userStore = useUserStore()
const progressStore = useProgressStore()

/**
 * 当前活跃标签
 */
const activeTab = ref('profile')

/**
 * 切换标签
 * @param {string} tab - 标签名称
 */
const switchTab = (tab) => {
  activeTab.value = tab
}

/**
 * 计算用户等级进度
 */
const levelProgress = computed(() => {
  const points = userStore.userInfo.points
  const currentLevel = userStore.userInfo.level
  
  // 下一级所需积分（模拟计算）
  const nextLevelPoints = currentLevel * 1000
  
  // 当前级别的起始积分
  const currentLevelPoints = (currentLevel - 1) * 1000
  
  // 计算进度百分比
  return Math.min(100, Math.round((points - currentLevelPoints) / (nextLevelPoints - currentLevelPoints) * 100))
})

/**
 * 格式化积分数字
 */
const formattedPoints = computed(() => {
  return userStore.userInfo.points.toLocaleString()
})

/**
 * 用户健康数据
 */
const healthData = computed(() => [
  { 
    label: '身高', 
    value: userStore.healthData.height, 
    unit: 'cm',
    icon: 'fa-ruler-vertical',
    color: 'bg-blue-500'
  },
  { 
    label: 'BMI', 
    value: userStore.healthData.bmi, 
    unit: '',
    status: userStore.bmiStatus,
    icon: 'fa-weight',
    color: 'bg-purple-500'
  },
  { 
    label: '累计减重', 
    value: userStore.healthData.weightLoss, 
    unit: 'kg',
    icon: 'fa-chart-line',
    color: 'bg-green-500'
  },
  { 
    label: '累计打卡', 
    value: userStore.healthData.checkInDays, 
    unit: '天',
    icon: 'fa-calendar-check',
    color: 'bg-yellow-500'
  }
])

/**
 * 设置项
 */
const settings = [
  {
    id: 'target',
    label: '目标管理',
    icon: 'fa-bullseye',
    color: 'text-red-500'
  },
  {
    id: 'notification',
    label: '提醒设置',
    icon: 'fa-bell',
    color: 'text-yellow-500'
  },
  {
    id: 'privacy',
    label: '隐私设置',
    icon: 'fa-shield-alt',
    color: 'text-blue-500'
  },
  {
    id: 'data',
    label: '数据导出',
    icon: 'fa-file-export',
    color: 'text-green-500'
  },
  {
    id: 'about',
    label: '关于应用',
    icon: 'fa-info-circle',
    color: 'text-purple-500'
  },
  {
    id: 'feedback',
    label: '意见反馈',
    icon: 'fa-comment-alt',
    color: 'text-indigo-500'
  }
]

/**
 * 处理设置项点击
 */
const handleSettingClick = (setting) => {
  console.log('点击设置项:', setting.id)
  // 实际项目中这里应该打开对应的设置页面或弹窗
}

/**
 * 模拟退出登录
 */
const logout = () => {
  console.log('退出登录')
  // 实际项目中这里需要处理用户登出逻辑
}
</script>

<template>
  <div class="profile-view">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <h1>我的</h1>
    </div>
    
    <!-- 标签切换 -->
    <div class="tabs">
      <div 
        class="tab" 
        :class="{ active: activeTab === 'profile' }"
        @click="switchTab('profile')"
      >
        个人资料
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'achievements' }"
        @click="switchTab('achievements')"
      >
        成就
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'settings' }"
        @click="switchTab('settings')"
      >
        设置
      </div>
    </div>
    
    <!-- 个人资料内容 -->
    <div v-if="activeTab === 'profile'" class="content-container">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-info">
          <div class="avatar">
            <img :src="userStore.userInfo.avatar" alt="用户头像">
          </div>
          <div class="user-details">
            <h2 class="username">{{ userStore.userInfo.name }}</h2>
            <div class="level-info">
              <span class="level-tag">Lv.{{ userStore.userInfo.level }}</span>
              <span class="points">{{ formattedPoints }} 积分</span>
            </div>
          </div>
        </div>
        
        <div class="level-progress">
          <div class="progress-bar">
            <div class="progress-filled" :style="`width: ${levelProgress}%`"></div>
          </div>
          <div class="progress-text">
            距离下一等级还需 {{ (userStore.userInfo.level * 1000) - userStore.userInfo.points }} 积分
          </div>
        </div>
      </div>
      
      <!-- 健康数据卡片 -->
      <div class="health-data-card">
        <h2 class="card-title">健康数据</h2>
        <div class="health-grid">
          <div 
            v-for="(item, index) in healthData" 
            :key="index"
            class="health-item"
          >
            <div class="item-icon" :class="item.color">
              <i class="fas" :class="item.icon"></i>
            </div>
            <div class="item-data">
              <span class="item-label">{{ item.label }}</span>
              <div class="item-value">
                <span class="value">{{ item.value }}</span>
                <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                <span v-if="item.status" class="status" :class="item.status === '正常' ? 'text-green-500' : 'text-yellow-500'">
                  ({{ item.status }})
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 目标卡片 -->
      <div class="target-card">
        <div class="card-header">
          <h2 class="card-title">目标设置</h2>
          <button class="edit-btn">
            <i class="fas fa-pen"></i>
          </button>
        </div>
        
        <div class="target-item">
          <div class="target-info">
            <span class="target-label">目标体重</span>
            <span class="target-value">{{ progressStore.targetWeight }} kg</span>
          </div>
          <div class="target-progress">
            <div class="progress-bar">
              <div class="progress-filled" :style="`width: ${progressStore.weightLossProgress}%`"></div>
            </div>
            <div class="progress-percentage">{{ progressStore.weightLossProgress }}%</div>
          </div>
        </div>
        
        <div class="target-item">
          <div class="target-info">
            <span class="target-label">每日步数</span>
            <span class="target-value">10,000 步</span>
          </div>
          <div class="target-progress">
            <div class="progress-bar">
              <div class="progress-filled" style="width: 65%"></div>
            </div>
            <div class="progress-percentage">65%</div>
          </div>
        </div>
        
        <div class="target-item">
          <div class="target-info">
            <span class="target-label">每周运动</span>
            <span class="target-value">5 天</span>
          </div>
          <div class="target-progress">
            <div class="progress-bar">
              <div class="progress-filled" style="width: 80%"></div>
            </div>
            <div class="progress-percentage">80%</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 成就内容 -->
    <div v-else-if="activeTab === 'achievements'" class="content-container">
      <div class="achievements-card">
        <h2 class="card-title">我的成就</h2>
        
        <div class="achievement-grid">
          <div 
            v-for="achievement in userStore.achievements" 
            :key="achievement.id"
            class="achievement-item"
            :class="{ unlocked: achievement.unlocked }"
          >
            <div class="achievement-icon">
              <i class="fas" :class="`fa-${achievement.icon}`"></i>
              <div class="achievement-level">{{ achievement.level }}</div>
            </div>
            <div class="achievement-name">{{ achievement.name }}</div>
            <div v-if="!achievement.unlocked" class="achievement-locked">
              <i class="fas fa-lock"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 月度挑战 -->
      <div class="challenges-card">
        <h2 class="card-title">月度挑战</h2>
        
        <div class="challenge-list">
          <div class="challenge-item active">
            <div class="challenge-status">
              <div class="status-icon in-progress">
                <i class="fas fa-spinner"></i>
              </div>
              <div class="status-line"></div>
            </div>
            <div class="challenge-content">
              <h3 class="challenge-title">连续打卡30天</h3>
              <div class="challenge-progress">
                <div class="progress-bar">
                  <div class="progress-filled" :style="`width: ${(progressStore.currentStreak / 30) * 100}%`"></div>
                </div>
                <div class="progress-text">{{ progressStore.currentStreak }}/30 天</div>
              </div>
              <div class="challenge-reward">
                <span class="reward-label">奖励：</span>
                <span class="reward-value">300积分 + 减重达人勋章</span>
              </div>
            </div>
          </div>
          
          <div class="challenge-item">
            <div class="challenge-status">
              <div class="status-icon completed">
                <i class="fas fa-check"></i>
              </div>
              <div class="status-line"></div>
            </div>
            <div class="challenge-content">
              <h3 class="challenge-title">累计减重3公斤</h3>
              <div class="challenge-progress">
                <div class="progress-bar">
                  <div class="progress-filled" style="width: 100%"></div>
                </div>
                <div class="progress-text">已完成</div>
              </div>
              <div class="challenge-reward">
                <span class="reward-label">奖励：</span>
                <span class="reward-value">200积分</span>
              </div>
            </div>
          </div>
          
          <div class="challenge-item">
            <div class="challenge-status">
              <div class="status-icon locked">
                <i class="fas fa-lock"></i>
              </div>
            </div>
            <div class="challenge-content">
              <h3 class="challenge-title">每周运动5天，连续4周</h3>
              <div class="challenge-description">完成上一挑战后解锁</div>
              <div class="challenge-reward">
                <span class="reward-label">奖励：</span>
                <span class="reward-value">500积分 + 运动达人勋章</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 设置内容 -->
    <div v-else-if="activeTab === 'settings'" class="content-container">
      <div class="settings-card">
        <h2 class="card-title">应用设置</h2>
        
        <div class="settings-list">
          <div 
            v-for="setting in settings" 
            :key="setting.id"
            class="setting-item"
            @click="handleSettingClick(setting)"
          >
            <div class="setting-icon" :class="setting.color">
              <i class="fas" :class="setting.icon"></i>
            </div>
            <div class="setting-label">{{ setting.label }}</div>
            <div class="setting-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 应用信息 -->
      <div class="app-info-card">
        <div class="info-item">
          <span class="info-label">当前版本</span>
          <span class="info-value">1.0.0</span>
        </div>
        <div class="info-item">
          <span class="info-label">构建号</span>
          <span class="info-value">#20230930</span>
        </div>
      </div>
      
      <!-- 退出登录 -->
      <button class="logout-btn" @click="logout">
        退出登录
      </button>
    </div>
  </div>
</template>

<style scoped>
.profile-view {
  padding-bottom: 80px;
}

/* 导航栏 */
.nav-bar {
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.nav-bar h1 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
  font-weight: 600;
}

/* 标签切换 */
.tabs {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 1rem;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #22C55E;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 3px;
  background-color: #22C55E;
  border-radius: 3px 3px 0 0;
}

/* 内容容器 */
.content-container {
  padding: 0 16px;
}

/* 用户信息卡片 */
.user-card,
.health-data-card,
.target-card,
.achievements-card,
.challenges-card,
.settings-card,
.app-info-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  border: 2px solid #22C55E;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.username {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.level-info {
  display: flex;
  align-items: center;
}

.level-tag {
  background-color: #22C55E;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 8px;
}

.points {
  font-size: 0.875rem;
  color: #666;
}

.level-progress {
  margin-top: 8px;
}

.progress-bar {
  height: 6px;
  background-color: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-filled {
  height: 100%;
  background-color: #22C55E;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
  text-align: right;
}

/* 卡片标题 */
.card-title {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  color: #333;
  font-weight: 600;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F3F4F6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
}

/* 健康数据 */
.health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.health-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #F9FAFB;
  border-radius: 8px;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.item-data {
  flex: 1;
}

.item-label {
  font-size: 0.75rem;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.item-value {
  display: flex;
  align-items: baseline;
}

.value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.unit {
  font-size: 0.75rem;
  color: #666;
  margin-left: 2px;
}

.status {
  font-size: 0.75rem;
  margin-left: 4px;
}

/* 目标卡片 */
.target-item {
  margin-bottom: 16px;
}

.target-item:last-child {
  margin-bottom: 0;
}

.target-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.target-label {
  font-size: 0.875rem;
  color: #333;
}

.target-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

.target-progress {
  display: flex;
  align-items: center;
}

.target-progress .progress-bar {
  flex: 1;
  margin-bottom: 0;
  margin-right: 8px;
}

.progress-percentage {
  font-size: 0.75rem;
  color: #22C55E;
  font-weight: 500;
}

/* 成就 */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: #F9FAFB;
  border-radius: 8px;
  position: relative;
}

.achievement-item.unlocked {
  background-color: #ECFDF5;
}

.achievement-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #E5E7EB;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: #9CA3AF;
  margin-bottom: 8px;
  position: relative;
}

.achievement-item.unlocked .achievement-icon {
  background-color: #D1FAE5;
  color: #22C55E;
}

.achievement-level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #22C55E;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.achievement-name {
  font-size: 0.75rem;
  color: #333;
  text-align: center;
}

.achievement-locked {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #9CA3AF;
  font-size: 0.875rem;
}

/* 挑战 */
.challenge-list {
  display: flex;
  flex-direction: column;
}

.challenge-item {
  display: flex;
  margin-bottom: 24px;
  position: relative;
}

.challenge-item:last-child {
  margin-bottom: 0;
}

.challenge-status {
  width: 24px;
  margin-right: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: white;
  z-index: 1;
}

.in-progress {
  background-color: #3B82F6;
}

.completed {
  background-color: #22C55E;
}

.locked {
  background-color: #9CA3AF;
}

.status-line {
  position: absolute;
  top: 24px;
  width: 2px;
  height: calc(100% + 24px);
  background-color: #E5E7EB;
  z-index: 0;
}

.challenge-item:last-child .status-line {
  display: none;
}

.challenge-content {
  flex: 1;
  background-color: #F9FAFB;
  border-radius: 8px;
  padding: 12px;
}

.challenge-item.active .challenge-content {
  background-color: #EFF6FF;
}

.challenge-title {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
}

.challenge-description {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 8px;
}

.challenge-progress {
  margin-bottom: 8px;
}

.challenge-progress .progress-bar {
  margin-bottom: 4px;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
}

.challenge-reward {
  font-size: 0.75rem;
  color: #666;
}

.reward-label {
  color: #333;
  font-weight: 500;
}

/* 设置 */
.settings-list {
  display: flex;
  flex-direction: column;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  margin-right: 12px;
}

.setting-label {
  flex: 1;
  font-size: 0.9375rem;
  color: #333;
}

.setting-arrow {
  color: #9CA3AF;
  font-size: 0.75rem;
}

/* 应用信息 */
.app-info-card {
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 0.875rem;
  color: #666;
}

.info-value {
  font-size: 0.875rem;
  color: #333;
}

/* 退出登录按钮 */
.logout-btn {
  width: 100%;
  padding: 14px;
  background-color: #FEE2E2;
  color: #EF4444;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 24px;
  cursor: pointer;
}
</style> 